<template>
  <div style="width: 100%;height: 100%;display: flex">
    <div class="left_box">
      <div class="code_box">
        <ace-editor style="width: 100%;height: 100%" :html-text-value="htmlStr" :ts-text-value="tsStr"></ace-editor>
      </div>
    </div>
    <div id="load4490_box">
      <div class="popup_box">
        <div class="inner_content_common">
          <div class="single_item">
            <el-button @click="renderWater('color')">效果1(颜色材质)</el-button>
            <el-button @click="renderWater('picture')">效果2（图片材质）</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {initMap} from "@/widgets/modelExample_cesium/common/initMap";
import {
  waterSurface
} from "@/widgets/modelExample_cesium/common/waterSurfaceManage";
import {onMounted, ref} from "vue";

import AceEditor from "@/components/aceEditor.vue";

const htmlStr = ref(`
<template>
  <div style="width: 100%;height: 100%;display: flex">
    <div id="load4490_box">
      <div class="popup_box">
        <div class="inner_content_common">
          <div class="single_item">
            <el-button @click="renderWater('color')">效果1(颜色材质)</el-button>
            <el-button @click="renderWater('picture')">效果2（图片材质）</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {initMap} from "@/widgets/modelExample_cesium/common/initMap";
import {
  waterSurface
} from "@/widgets/modelExample_cesium/common/waterSurfaceManage";
import {onMounted, ref} from "vue";


const renderWater = (type: string) => {
  waterSurface(cViewer.value, type)
}

const cViewer = ref();
onMounted(() => {
  cViewer.value = initMap("load4490_box")
})
<\/script>

<style lang="scss" scoped>
#load4490_box {
  width: 60%;
  height: 100%;
}

.popup_box {
  position: fixed;
  left: calc(40% + 40px);
  min-width: 100px;
  width: auto;
  top: 80px;
  height: 60px;
  z-index: 10;
}

.inner_content_common {
  margin-top: 10px;
  display: flex;
  justify-content: center;
  flex-direction: column;

  .single_item {
    border-radius: 5px;
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    align-items: center;
  }

  .single_item_title {
    margin: 10px;
    color: #ffffff;
  }
}
</style>

`);
const tsStr = ref(`
import * as Cesium from 'cesium'
import { getAssetsFile } from "@/utils/utils";
import riverJson from '@/assets/data/river.json'

const waterSurface=(viewer:any,type:string)=>{
    removePri(viewer);
    let material=null;
    if(type==="color"){
        material = new Cesium.Material({
            fabric: {
                type: "Water",
                uniforms: {
                    baseWaterColor: new Cesium.Color(64 / 255.0, 157 / 255.0, 253 / 255.0, 0.5),
                    frequency: 8000.0, // 控制波数的数字。
                    animationSpeed: 0.02, // 控制水的动画速度的数字。
                    amplitude: 5.0, // 控制水波振幅的数字。
                    specularIntensity: 0.8, // 控制镜面反射强度的数字。
                }
            }
        })
    }else{
         material = new Cesium.Material({
            fabric: {
                type: "Water",
                uniforms: {
                    normalMap: getAssetsFile('/water/waterNormals.jpg'),
                    frequency: 8000.0, // 控制波数的数字。
                    animationSpeed: 0.02, // 控制水的动画速度的数字。
                    amplitude: 5.0, // 控制水波振幅的数字。
                    specularIntensity: 0.8, // 控制镜面反射强度的数字。
                }
            }
        })
    }
    let features= riverJson.features;
    let instances:any=[];
    features.forEach((item:any)=>{
        let coordinates=item.geometry.coordinates.join(',');
       let newCoordinate= coordinates.split(',').map((item:any)=>Number(item))
        instances.push( new Cesium.GeometryInstance({
            geometry: new Cesium.PolygonGeometry({
                polygonHierarchy: new Cesium.PolygonHierarchy(
                    Cesium.Cartesian3.fromDegreesArray(newCoordinate)
                ),
                vertexFormat: Cesium.EllipsoidSurfaceAppearance.VERTEX_FORMAT,
                extrudedHeight:-20,
                height: 10
            })
        }));
    })

    let primitives = new Cesium.Primitive({
        geometryInstances:instances,
        appearance: new Cesium.EllipsoidSurfaceAppearance({
            material: material
        }),
        vertexCacheOptimize:true,
    })
    viewer.scene.primitives.add(
        primitives
    );
}
const removePri=(viewer:any)=>{
    viewer.scene.primitives.removeAll();
}
export {
    waterSurface
}

`);

const renderWater = (type: string) => {
  waterSurface(cViewer.value, type)
}

const cViewer = ref();
onMounted(() => {
  cViewer.value = initMap("load4490_box")
})
</script>

<style lang="scss" scoped>
.left_box {
  width: 40%;
  height: 100%;
  display: flex;
  flex-direction: row-reverse;

  .code_box {
    margin: 10px;
    width: calc(100% - 220px);
    height: calc(100% - 20px);
    //border:1px solid #00ff00;
    background-color: #ffffff;
    color: #000;
    overflow-x: hidden;
    overflow-y: auto;
  }
}

#load4490_box {
  width: 60%;
  height: 100%;
}

.popup_box {
  position: fixed;
  left: calc(40% + 40px);
  min-width: 100px;
  width: auto;
  top: 80px;
  height: 60px;
  z-index: 10;
}

.inner_content_common {
  margin-top: 10px;
  display: flex;
  justify-content: center;
  flex-direction: column;

  .single_item {
    border-radius: 5px;
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    align-items: center;
  }

  .single_item_title {
    margin: 10px;
    color: #ffffff;
  }
}
</style>
